'use client';

import Link from 'next/link';
import { IMenu } from '@/interfaces';
import { usePathname } from 'next/navigation';
import classNames from 'classnames';
import { useTranslations } from 'use-intl';

export default function NavbarAdminPage({ menus = [] }: { menus: IMenu[] }) {
  const t = useTranslations('AdminPage');
  const pathname = usePathname();
  const currentMenu = findCurrentMenu();

  function findCurrentMenu(): {
    id: number;
    name: string;
    submenuId?: number;
    submenuName?: string;
  } {
    const currentMenu = menus.find((item) => item.path === pathname);
    if (currentMenu) {
      return {
        id: currentMenu.id,
        name: currentMenu.name,
      };
    } else {
      let data;
      for (let i = 0; i < menus.length; i++) {
        const item = menus[i];
        const currentSubmenu = item.submenus.find(
          (submenu) => submenu.path === pathname,
        );
        if (currentSubmenu) {
          data = {
            id: item.id,
            name: item.name,
            submenuId: currentSubmenu.id,
            submenuName: currentSubmenu.name,
          };
          break;
        }
      }
      return data
        ? data
        : {
            id: -1,
            name: t('adminHomepage'),
          };
    }
  }

  return (
    <div className="row card border-0">
      <div className="col card-body">
        <div className="container">
          <ul className="nav justify-content-center">
            {menus.map((item) => {
              if (item.submenus.length === 0) {
                return (
                  <li key={item.id} className="nav-item">
                    {item.menuType === 'LINK' && (
                      <Link
                        href={item.path}
                        className={classNames('nav-link cursor-pointer', {
                          'text-muted': currentMenu.id !== item.id,
                          active: currentMenu.id === item.id,
                        })}
                      >
                        {item.name}
                      </Link>
                    )}

                    {item.menuType === 'BUTTON' && (
                      <a
                        className={classNames('nav-link cursor-pointer', {
                          'text-muted': currentMenu.id !== item.id,
                          active: currentMenu.id === item.id,
                        })}
                      >
                        {item.name}
                      </a>
                    )}
                  </li>
                );
              } else {
                return (
                  <li key={item.id} className="nav-item dropdown">
                    <a
                      className={classNames(
                        'nav-link dropdown-toggle cursor-pointer',
                        {
                          'text-muted': currentMenu.id !== item.id,
                          active: currentMenu.id === item.id,
                        },
                      )}
                      data-bs-toggle="dropdown"
                      role="button"
                      aria-expanded="false"
                    >
                      {item.name}
                    </a>

                    <ul className="dropdown-menu">
                      {item.submenus.map((submenu) => {
                        return (
                          <li key={submenu.id}>
                            {submenu.menuType === 'LINK' && (
                              <Link
                                href={submenu.path}
                                className={classNames('dropdown-item', {
                                  'text-muted':
                                    currentMenu.submenuId !== submenu.id,
                                  active: currentMenu.submenuId === submenu.id,
                                })}
                              >
                                {submenu.name}
                              </Link>
                            )}

                            {submenu.menuType === 'BUTTON' && (
                              <a
                                className={classNames('dropdown-item', {
                                  'text-muted':
                                    currentMenu.submenuId !== submenu.id,
                                  active: currentMenu.submenuId === submenu.id,
                                })}
                              >
                                {submenu.name}
                              </a>
                            )}
                          </li>
                        );
                      })}
                    </ul>
                  </li>
                );
              }
            })}
          </ul>
        </div>
      </div>
    </div>
  );
}
